<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <c-select
          :options="enumModeAll"
          clearable
          placeholder="业务类型"
          v-model="modeSelect"
          @change="handleModeChange"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border :columns="tableColumns" :data="tableData"></c-table>

    <flow-dialog :title="flowName" :visible.sync="flowVisible" :flow-key="flowKey"></flow-dialog>
  </div>
</template>

<script>
import { enumModes as enumModeLimit } from '@/bank/views/business/index/LimitProduct'
import { enumModes as enumMode28 } from '@/bank/views/business/index/NormalProduct'

import FlowDialog from '@/credit/components/flow/ViewDialog'

const getModes = (index, enumMode) =>
  Object.keys(enumMode).map(key => ({
    value: `${index}-${key}`,
    label: enumMode[key],
  }))
const enumModeAll = [...getModes(0, enumMode28), ...getModes(1, enumModeLimit)]

export default {
  components: {
    FlowDialog,
  },
  props: {},
  data() {
    return {
      params: {},
      tableData: [],
      tableColumns: [
        { attrs: { label: '流程名称', prop: 'name' } },
        { attrs: { label: '业务类型', prop: 'channelName' } },
        { attrs: { label: '流程标识', prop: 'flowKey' } },
        {
          attrs: { label: '操作' },
          operations: [
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      list: [
        {
          name: '项目审批',
          guaType: 0,
          channelType: 0,
          flowKey: 'PROJECT_APPROVAL',
        },
        {
          name: '项目审批-直担',
          guaType: 0,
          channelType: 0,
          flowKey: 'PROJECT_APPROVAL_DIR',
        },
        {
          name: '合同审批',
          guaType: 0,
          channelType: 0,
          flowKey: 'CONTRACT_APPROVAL',
        },
        {
          name: '放款审批',
          guaType: 0,
          channelType: 0,
          flowKey: 'LOAD_APPROVAL',
        },
        {
          name: '风险审查报告',
          guaType: 0,
          channelType: 0,
          flowKey: 'RISK_REVIEW_APPROVAL',
        },
        {
          name: '项目审批',
          guaType: 0,
          channelType: 1,
          flowKey: 'QUICK_PROJECT_APPROVAL',
        },
      ],

      enumModeAll,
      modeSelect: '',

      flowName: '',
      flowKey: '',
      flowVisible: false,
    }
  },
  computed: {
    modeList() {
      if (!this.modeSelect) return this.list
      let [mode, channel] = this.modeSelect.split('-')
      mode = +mode
      channel = +channel
      return this.list.filter(it => it.guaType === mode && it.channelType === channel)
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.tableData = this.modeList.map(item => {
        const enumMode = item.guaType === 3 ? enumModeLimit : enumMode28
        item.channelName = enumMode[item.channelType] || '-'
        return item
      })
    },
    handleView(row) {
      this.flowName = ''
      this.flowKey = row.flowKey
      this.flowVisible = true
    },
    handleModeChange() {
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped></style>
